<template>
	<view class="page">
		<view class="top-wrap" :style="{paddingTop:navHeight + 'px',height:`calc(${navHeight}px + 330rpx)`}">
			<image class="banner" src="../../../static/mine/mineBanner.png"></image>
			<view class="top-content" v-if="isLogin">
				<view class="user-wrap">
					<view class="user-msg" @click="toMyCard">
						<view class="tx">
							<u-avatar mode="aspectFill" size="108rpx" :src="userInfo.headImg?fileServer+userInfo.headImg:null"></u-avatar> 
							<image class="vip" src="../../../static/img/vip-icon.png" mode="widthFix"
								v-if="userInfo.sfVip=='1'" ></image>
						</view>
						<view class="msg">
							<view class="name">
								{{userInfo.name||'--'}}
							</view>
							<view class="phone">
								{{userInfo.mobile||'--'}}
							</view>
							<view class="phone" v-if="userInfo.vipEndtime">
								会员时间：{{userInfo.vipEndtime}}
							</view>
						</view>
					</view>
					<view class="jf" @click="toMyJF">
						<view class="label">
							我的积分
						</view>
						<view class="value">
							{{userInfo.jifen?userInfo.jifen:0}}
						</view>
					</view>
				</view>
			</view>
			<view class="top-content" v-else>
				<view class="user-wrap">
					<view class="user-msg">
						<view class="msg">
							<view class="name" @click="toLogin">
								点击登录
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="main">
			<view class="card">
				<view class="title">
					我的服务
				</view>
				<u-grid :border="false" :col="4" align="left" @click="clickServe">
					<u-grid-item v-for="(item,index) in myServeList" :key="'grid'+index" v-if="item.isShow"
						:name="item.path">
						<view class="my-serve">
							<u-badge max="9999" :value="item.num" :absolute="true" :offset="[0,0]"></u-badge>
							<image class="pic" :src="item.image"></image>
							<text class="grid-text">{{item.title}}</text>
						</view>
					</u-grid-item>
				</u-grid>
			</view>
			<image class="ad1" :src="blList.length>0?(fileServer + blList[0].img):'../../../static/mine/mineADS.png'"
				mode="widthFix" @click="toMyCardEdit"></image>
			<view class="ad-list">
				<image class="ad" mode="widthFix"
					:src="blList.length>1?(fileServer + blList[1].img):'../../../static/mine/mineADS1.png'"></image>
				<image class="ad" mode="widthFix"
					:src="blList.length>2?(fileServer + blList[2].img):'../../../static/mine/mineADS2.png'"></image>
				<image class="ad" mode="widthFix"
					:src="blList.length>3?(fileServer + blList[3].img):'../../../static/mine/mineADS3.png'"></image>
			</view>
			<view class="card" v-if="shareInfo.title">
				<view class="title1">
					{{shareInfo.title}}
				</view>
				<view class="content" v-text="shareInfo.miaoshu">
				</view>
				<view class="btn-wrap">
					<view class="btn btn1" @click="toMyJF">
						获取积分规则
					</view>
					<!-- <view class="btn btn2">
						转发
					</view> -->
					<button open-type="share" class="btn btn2">
						转发
					</button>
				</view>
			</view>
		</view>
		<view class="page-btm-tc">

		</view>
		<view class="page-btm">
			<view class="myzs">
				我的专属客服 >
			</view>
			<view class="myxy">
				本平台信息不代表官方平台观点，投资有风险
				<text style="color: #AD2323;margin-left: 16rpx;">用户使用协议</text>
			</view>
		</view>
		<u-modal :show="userInfoShow" title="初次登录,请完善用户信息">
			<view>
				<view style="text-align: center;">
					<button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar"
						style="padding: 0;display: inline-block;">
						<u-avatar shape="square" :src="userInfo.headImg?fileServer+userInfo.headImg:null"></u-avatar>
					</button>
				</view>
				<view style="margin-top: 20rpx;">
					<u-input placeholder="请输入昵称" border="surround" v-model="userInfo.ncName" type="nickname"></u-input>
				</view>
			</view>
			<u-button text="一键获取手机号并绑定用户信息" open-type="getPhoneNumber" @getphonenumber="getphonenumber"
				slot="confirmButton" type="primary" plain></u-button>
		</u-modal>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				navHeight: 0,
				myServeList: [{
						image: '../../../static/mine/mineMPBJ.png',
						title: '名片编辑',
						path: '/pages/card/cardEdit/cardEdit',
						num: 0,
						isShow: true,
					},
					{
						image: '../../../static/mine/mineCPBJ.png',
						title: '产品编辑',
						path: '/pages/company/product/product',
						num: 0,
						isShow: true,
					},
					{
						image: '../../../static/mine/mineGXFB.png',
						title: '供需发布',
						path: '/pages/mine/issueList/issueList',
						num: 0,
						isShow: true,
					},
					{
						image: '../../../static/mine/mineKHBWL.png',
						title: '客户备忘录',
						path: '/pages/client/memo/memo',
						num: 0,
						isShow: true,
					},
					{
						image: '../../../static/mine/mineWTFK.png',
						title: '问题反馈',
						path: '/pages/mine/problem/problem',
						num: 0,
						isShow: true,
					},
					{
						image: '../../../static/mine/mineYPSQ.png',
						title: '我的样品',
						path: '/pages/mine/sampleList/sampleList',
						num: 0,
						isShow: true,
					},
					{
						image: '../../../static/mine/mineWDSC.png',
						title: '我的收藏',
						path: '/pages/mine/collect/collect',
						num: 0,
						isShow: true,
					},
					{
						image: '../../../static/mine/mineQYTS.png',
						title: '企业同事',
						path: '/pages/company/colleagues/colleagues',
						num: 0,
						isShow: true,
					},
					{
						image: '../../../static/mine/mineWDQB.png',
						title: '我的钱包',
						path: '/pages/mine/myIntegral/myIntegral',
						num: 0,
						isShow: true,
					},
				],
				isLogin: false,
				userInfo: {},
				userInfoShow: false,
				phoneShow: false,
				fileServer: this.$fileServer,
				shareInfo: {},
				blList: [],
			}
		},
		onLoad(e) {
			// #ifdef MP-WEIXIN
			let statusBarHeight = uni.getSystemInfoSync().statusBarHeight
			const custom = wx.getMenuButtonBoundingClientRect()

			let navigationBarHeight = custom.height + (custom.top - statusBarHeight) * 2
			this.navHeight = navigationBarHeight + statusBarHeight

			// #endif
			// if (uni.getStorageSync('memberId')) {
			// 	this.getUserInfo()
			// }
			if(e.yqrId){//分享人Id
				uni.setStorageSync("yqrId",e.yqrId);
			}
			
		},
		onShow() {
			this.getUserInfo()
		},
		methods: {
			toMyCard() {
				uni.navigateTo({
					url: "/pages/card/cardIndex/cardIndex"
				})
			},
			toMyCardEdit() {
				uni.navigateTo({
					url: "/pages/card/cardEdit/cardEdit"
				})
			},
			sortByField(arr, fieldName) {
				arr.sort(function(a, b) {
					var fieldA = a[fieldName];
					var fieldB = b[fieldName];

					// 转换为数字进行比较，确保按照数字顺序排序
					return fieldA - fieldB;
				});
			},
			getUserInfo() {
				this.$api.member.getPersonCenterById().then(res => {
					console.log('res', res);
					if (uni.getStorageSync('memberId')) {
						this.isLogin = true
					}
					this.userInfo = res.data.member
					this.shareInfo = res.data.shareInfo
					this.sortByField(res.data.bList, 'num')
					this.blList = res.data.bList
					
					if (uni.$u.test.isEmpty(this.userInfo.type)) {
						uni.showModal({
							title: "请选择您的身份",
							content: "完成身份选择后开始使用服务",
							success(modalRes) {
								if (modalRes.confirm) {
									uni.reLaunch({
										url: "/pages/welcome/welcome"
									})
								} else {
									this.isLogin = false
								}
							}
						})
						return false
					}
					for (let i = 0; i < this.myServeList.length; i++) {
						if (this.myServeList[i].title === '企业同事') {
							this.myServeList[i].num = res.qytsNum
						} else if (this.myServeList[i].title === '客户备忘录') {
							this.myServeList[i].num = res.customNum
						} else if (this.myServeList[i].title === '样品申请') {
							this.myServeList[i].num = res.ypsqNum
						} else if (this.myServeList[i].title === '问题反馈' && this.userInfo.type !== '0') {
							this.myServeList[i].isShow = false
						} else if (this.myServeList[i].title === '产品编辑' && this.userInfo.type !== '1') {
							if (this.userInfo.companyId) {
								this.myServeList[i].path = this.myServeList[i].path + '?id=' + this.userInfo.companyId
							}
							this.myServeList[i].isShow = false
						} else if (this.myServeList[i].title === '产品编辑' && this.userInfo.type === '1') {
							if (this.userInfo.companyId) {
								this.myServeList[i].path = this.myServeList[i].path + '?id=' + this.userInfo.companyId
							}
						}
					}
					if(this.userInfo.companyId){
						uni.setStorageSync('companyId', this.userInfo.companyId||'');
					}
				})
			},
			onChooseAvatar(res) {
				uni.uploadFile({
					url: this.$serverUrl + '/api/member/uploadFile.client', //仅为示例，非真实的接口地址
					filePath: res.detail.avatarUrl,
					name: 'upload',
					success: (uploadFileRes) => {
						this.userInfo.headImg = JSON.parse(uploadFileRes.data).data
					}
				});
			},
			getphonenumber(code) {
				this.$api.member.wxAuthMobile({
					"headImg": this.userInfo.headImg,
					"ncName": this.userInfo.ncName,
					code: code.detail.code
				}).then(res => {
					this.userInfo = res.data
					this.userInfoShow = false
					this.isLogin = true
					if (uni.$u.test.isEmpty(this.userInfo.type)) {
						uni.showModal({
							title: "请选择您的身份",
							success(modalRes) {
								if (modalRes.confirm) {
									uni.reLaunch({
										url: "/pages/welcome/welcome"
									})
								} else {
									this.isLogin = false
								}
							}
						})
					} else {
						this.getUserInfo()
					}
				})
			},
			toLogin() {
				uni.login({
					provider: "weixin",
					success: (loginRes) => {
						if (loginRes.errMsg === "login:ok") {
							// code: loginRes.code
							this.$api.member.wxAuthLogin({
								code: loginRes.code,
								yqrId:uni.getStorageSync("yqrId")||'',
							}).then(res => {
								this.userInfo = res.data
								uni.setStorageSync('memberId', res.data.id)
								uni.setStorageSync('companyId', res.data.companyId||'');
								if (uni.$u.test.isEmpty(res.data.name) || uni.$u.test.isEmpty(res.data
										.mobile)) {
									this.userInfoShow = true
								} else {
									this.isLogin = true
									if (uni.$u.test.isEmpty(this.userInfo.type)) {
										uni.showModal({
											title: "请选择您的身份",
											success(modalRes) {
												if (modalRes.confirm) {
													uni.reLaunch({
														url: "/pages/welcome/welcome"
													})
												} else {
													this.isLogin = false
												}
											}
										})
									} else {
										this.getUserInfo()
									}
								}
							})
						}
					},
					complete(e) {
						console.log('rese', e);
					}
				})
			},
			clickServe(path) {
				console.log('id:',uni.getStorageSync('memberId'))
				if (uni.getStorageSync('memberId')) {
					uni.navigateTo({
						url: path
					})
				}else{
					this.toLogin()
				}
				

			},
			toMyJF() {
				if (uni.getStorageSync('memberId')) {
					uni.navigateTo({
						url: "/pages/mine/myIntegral/myIntegral"
					})
				}else{
					this.toLogin()
				}
				
			},
		},
		// #ifdef MP-WEIXIN
		onShareAppMessage(res) {
		    if (res.from === 'button') {// 来自页面内分享按钮
		        console.log('999')
		    }
			let yqrId = uni.getStorageSync("memberId")||'';
		    return {
		        title: '快消家', //分享的名称
		        path: `/pages/tabBar/mine/mine?yqrId=${yqrId}`,
		    }
		},
		// #endif
	}
</script>

<style lang="scss" scoped>
	.page {
		background: #F8F9FA;

		.main {
			width: 100%;
			padding: 0 30rpx;
			position: relative;
			top: -120rpx;
			z-index: 3;

			.ad1 {
				width: 100%;
				height: auto;
			}

			.ad-list {
				width: 100%;
				height: auto;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.ad {
					flex: 1;
					height: auto;
				}

			}


		}
	}

	.top-wrap {
		width: 100%;
		height: auto;
		position: relative;

		.banner {
			width: 100%;
			height: 100%;
			position: absolute;
			z-index: 1;
			top: 0;
			left: 0;
		}

		.top-content {
			width: 100%;
			height: 100%;
			position: relative;
			z-index: 2;
			overflow: hidden;

			.user-wrap {
				margin-top: 32rpx;
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0 30rpx;

				.user-msg {
					width: 100%;
					display: flex;
					align-items: center;

					.tx {
						width: 112rpx;
						border-radius: 50%;
						border: 2rpx solid #ffffff;
						height: 112rpx;
						position: relative;

						.tx-pic {
							width: 100%;
							height: 100%;
							border-radius: 50%;
							display: block;
						}

						.vip {
							position: absolute;
							right: 0;
							top: 6rpx;
							width: 28rpx;
							height: 20rpx;
							z-index: 10;

						}
					}

					.msg {
						margin-left: 30rpx;

						.name {
							font-size: 32rpx;
							font-weight: bold;
							color: #FFFFFF;
							line-height: 44rpx;
							margin-bottom: 4rpx;
						}

						.phone {
							font-size: 24rpx;
							color: #FFFFFF;
							opacity: 0.8;
						}
					}
				}

				.jf {
					display: flex;
					align-items: center;
					flex-shrink: 0;

					.label {
						font-size: 24rpx;
						color: #FFFFFF;
						opacity: 0.8;
						flex-shrink: 0;
					}

					.value {
						font-size: 36rpx;
						font-weight: bold;
						color: #FFFFFF;
						flex-shrink: 0;
						margin-left: 20rpx;
					}
				}
			}
		}
	}

	.card {

		background: #FFFFFF;
		border-radius: 20rpx;
		margin-bottom: 14rpx;

		.title {
			padding: 18rpx 0 34rpx 36rpx;
			font-size: 28rpx;
			font-weight: bold;
		}

		.my-serve {
			display: flex;
			flex-direction: column;
			// justify-content: center;
			align-items: center;
			margin-bottom: 20rpx;
			position: relative;

			.pic {
				width: 76rpx;
				height: 76rpx;
				margin-bottom: 8rpx;
			}

			.grid-text {
				font-size: 28rpx;
			}
		}

		.title1 {
			padding: 24rpx 24rpx 12rpx;

			font-size: 28rpx;
			font-weight: bold;
		}

		.content {
			font-size: 24rpx;
			color: #777777;
			line-height: 34rpx;
			padding: 0 24rpx;
		}

		.btn-wrap {
			margin-top: 34rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			padding-bottom: 32rpx;

			.btn {
				width: 244rpx;
				height: 70rpx;
				border-radius: 35rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 26rpx;
				font-weight: bold;
				margin: 0 30rpx;

				&.btn1 {
					color: #EC2424;
					border: 1px solid #EC2424;
				}

				&.btn2 {
					color: #FFFFFF;
					background: #EC2424;
				}
			}
		}
	}

	.page-btm-tc {
		height: 116rpx;
		width: 100%;
	}

	.page-btm {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		z-index: 4;
		background-color: #fff;

		.myzs {
			width: 100%;
			height: 54rpx;
			background: rgba(236, 36, 36, 0.09);
			line-height: 54rpx;
			text-align: center;
			color: #EC2424;
			font-size: 22rpx;
		}

		.myxy {
			width: 100%;
			height: 54rpx;
			background: rgba(236, 174, 36, 0.09);
			text-align: center;
			line-height: 54rpx;
			font-size: 22rpx;
			color: #AAAAAA;
		}
	}
</style>